<template>
  <guat-page-layout :title="['签到管理', '今日签到列表']" divide :left-width="400">
    <template #actions>
      <guat-button-group
        :buttons="[{ text: '新建签到', internal: $config.$button.PLR, onClick: handleAdd }]"
      />
    </template>
    <template #left>
      <div class="flex flex-col gap-4">
        <guat-calendar />
        <div class="flex justify-around p-4 rounded bg-gradient-to-r from-[#3F8CFF] to-[#5A9AF9]">
          <img :src="svg" :width="56" :height="56" />
          <div class="flex flex-col gap-2 text-[#fff]">
            <span class="text-sm">本周值日生</span>
            <span class="text-xl font-bold">张三</span>
          </div>
          <div class="flex flex-col gap-2 text-[#fff]">
            <span class="text-sm">本周周次</span>
            <span class="text-xl font-bold">第6周</span>
          </div>
        </div>
        <div class="flex gap-4">
          <div class="p-4 bg-bg-3 flex-1 cursor-pointer">
            <div class="mb-3 text-base">今日请假人数</div>
            <div class="text-xl font-bold text-primary">12人</div>
          </div>
          <div class="p-4 bg-bg-3 flex-1 cursor-pointer">
            <div class="mb-3 text-base">今日待审批请假</div>
            <div class="text-xl font-bold text-primary">3条</div>
          </div>
        </div>
      </div>
    </template>
    <template #right>
      <guat-sign-in-table />
    </template>
    <guat-new-sign-in-modal :title>
      <guat-new-sign-in-desc
        v-if="scenario == 'check'"
        size="large"
        :column="1"
        :label-style="{
          verticalAlign: 'top',
        }"
      />
      <guat-new-sign-in-form v-else />
    </guat-new-sign-in-modal>
  </guat-page-layout>
</template>

<script setup lang="ts">
import svg from "@/assets/svgs/attendance-icon.svg";
import { createTableColumns } from "../table";
import { newSignInFormItemConfig } from "../form-config";
import { newSignInDesc } from "../desc-config";
import { SignInPropertyMap as SIPM } from "@/map/attendance/sign-in/property-map";

type Scenario = "create" | "check" | "edit";

const scenario = ref<Scenario>("create");
const title = computed(() => {
  switch (unref(scenario)) {
    case "check":
      return "查看签到";
    case "create":
      return "创建签到";
    case "edit":
      return "编辑签到";
  }
});
const { warning } = useModalNotice();
const { success } = useMessage();
const [GuatNewSignInForm, { setFormValue }] = useForm(newSignInFormItemConfig);
const [GuatNewSignInDesc] = useDescriptions(newSignInDesc, {
  [SIPM.No]: "1",
  [SIPM.Title]: "基地日常签到",
  [SIPM.StartTime]: "2024-04-10 19:00:00",
  [SIPM.EndTime]: "2024-04-10 20:00:00",
  [SIPM.AllowLeave]: "允许",
});
const [GuatNewSignInModal, { setModalVisible }] = useModal();
const [GuatSignInTable, { setTableData }] = useTable(
  createTableColumns({
    del: handleDelete,
    upd: handleEdit,
    check: handleCheck,
  })
);

function handleAdd() {
  setFormValue({
    memberList: ["2022070030101", "2022070030102", "2022070030103", "2022070030105"],
  });
  (scenario.value = "create"), setModalVisible(true);
}

function handleDelete() {
  warning({
    title: "删除提示",
    content: `请确认是否要删除当前签到?`,
    onOk: () => success("删除成功"),
  });
}

function handleEdit() {
  setFormValue({
    [SIPM.No]: "1",
    [SIPM.Title]: "基地日常签到",
    [SIPM.StartTime]: ["2024-04-10 19:00:00", "2024-04-10 20:00:00"],
    [SIPM.AllowLeave]: true,
    [SIPM.Status]: 0,
    memberList: ["2022070030101", "2022070030102", "2022070030103", "2022070030105"],
  });
  scenario.value = "edit";
  setModalVisible(true);
}

function handleCheck() {
  (scenario.value = "check"), setModalVisible(true);
}

onMounted(() => {
  setTableData([
    {
      [SIPM.No]: "1",
      [SIPM.Title]: "基地日常签到",
      [SIPM.StartTime]: "2024-04-10 19:00:00",
      [SIPM.EndTime]: "2024-04-10 20:00:00",
      [SIPM.Status]: 0,
    },
    {
      [SIPM.No]: "1",
      [SIPM.Title]: "2023-2024学年第六周周赛签到",
      [SIPM.StartTime]: "2024-04-10 17:00:00",
      [SIPM.EndTime]: "2024-04-10 22:00:00",
      [SIPM.Status]: 1,
    },
  ]);
});
</script>

<style scoped></style>
